<script lang="ts" setup>
import './iconfig/iconfont.css'
import { ref } from 'vue'
import type { DropdownInstance } from 'element-plus'
const imageUrl = ref("")
const currentTime = ref("")
currentTime.value = `${new Date().getFullYear()}
             -${(new Date().getMonth() + 1).toString().padStart(2, '0')}
             -${new Date().getDate().toString().padStart(2, '0')}`
const menuVisible = ref<DropdownInstance>()
function showClick() {
    if (!menuVisible.value) return
    menuVisible.value.handleOpen()
}
const brightness = ref(10)
const handleSliderChange = (newValue) => {  
      brightness.value = newValue;  
}; 
const dialogVisible = ref(false)
const exitLogin=()=>{

}
</script>
<template>
    <div class="common" :style="{'--page-brightness': `${brightness * 100}%`}">
        <el-container>
            <el-header class="mainHeader">
                <img style="position: absolute;left: 2%; width: 390px;top: 20%;" src="./img/logo.png" />                <el-dropdown
                    style="position: absolute; right: 10%;top: 30%;width: 100px;font-size: 23px;position: absolute;top: 9%;">
                    <el-avatar v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-avatar v-else :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"
                        class="avatar" />
                    <template #dropdown>
                        <el-dropdown-menu style="width: 110px;">
                            <el-dropdown-item class="">
                                <el-span>账号</el-span>
                            </el-dropdown-item>
                            <el-dropdown-item class="">
                                <el-span>个人信息</el-span>
                            </el-dropdown-item>
                            <el-dropdown-item class=""> 
                                <el-badge :value="200" :max="99" class="item">
                                    待处理
                                </el-badge>
                            </el-dropdown-item>
                            <el-dropdown-item class="exitLogin" @click="dialogVisible = true">退出登录</el-dropdown-item>
                            <el-dropdown-item class="exitLogin">
                                <el-upload class="avatar-uploader" name="file" :auto-upload="true" action="/oss/policy"
                                    :show-file-list="false">
                                    修改头像
                                </el-upload>
                            </el-dropdown-item>
                            <el-dropdown-item class="exitLogin">修改密码</el-dropdown-item>
                            <el-dropdown-item>亮度
                              <el-slider v-model="brightness" @change="handleSliderChange" :min="0.1" :max="1" :step="0.05" style="width: 40px;"></el-slider> 
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                    <el-button>退出登录</el-button>
                </el-dropdown>
                <el-span v-text="currentTime"
                    style="right: 2%; position: absolute; top: 17%;font-size: 23px; color: white;"></el-span>
                  <el-dialog v-model="dialogVisible" title="退出登录" width="500">
                  <span>确认退出吗？</span>
                  <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false; exitLogin()">
                      确认
                    </el-button>
                  </template>
                </el-dialog>
            </el-header>
            <el-container class="layout-container-demo" style="height: 630px">
                <el-aside  class="el_aside" width="200px">
                    <el-scrollbar>
                        <el-menu :default-openeds="['1', '3']" router style="background-color:rgb(194, 192, 192);">
                            <el-sub-menu >
                                <template #title>
                                    <el-icon class="iconfont applyIcon">
                                    </el-icon>申请管理
                                </template>
                                <el-menu-item index="applyInfo">
                                    <el-badge :value="200" :max="99" class="item" style="position: absolute;top: -28px;left: 95px;">
                                    </el-badge> 申请信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon class="iconfont buildingIcon">
                                    </el-icon>教学楼管理
                                </template>
                                <el-menu-item>教学楼信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon class="iconfont academyIcon">
                                    </el-icon>学院管理
                                </template>
                                <el-menu-item index="/academyInfo">学院信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon class="iconfont professionIcon">
                                    </el-icon>专业管理
                                </template>
                                <el-menu-item>专业信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="5">
                                <template #title>
                                    <el-icon class="iconfont roomIcon">
                                    </el-icon>教室管理
                                </template>
                                <el-menu-item index="">教室信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="6">
                                <template #title>
                                    <el-icon class="iconfont seatIcon">
                                    </el-icon>座位管理
                                </template>
                                <el-menu-item index="/table/menu">座位信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="7">
                                <template #title>
                                    <el-icon class="iconfont studentIcon">
                                    </el-icon>学生管理
                                </template>
                                <el-menu-item>学生信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="8">
                                <template #title>
                                    <el-icon class="iconfont managerIcon">
                                    </el-icon>管理员管理
                                </template>
                                <el-menu-item>管理员信息</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="9">
                                <template #title>
                                    <el-icon class="iconfont historyIcon">
                                    </el-icon>历史信息
                                </template>
                                <el-menu-item>教学楼</el-menu-item>
                                <el-menu-item>学院</el-menu-item>
                                <el-menu-item>专业</el-menu-item>
                                <el-menu-item>教室</el-menu-item>
                                <el-menu-item>座位</el-menu-item>
                                <el-menu-item>学生</el-menu-item>
                            </el-sub-menu>
                            <el-menu-item index="/aboutSystem">
                                <template #title>
                                    <el-icon class="iconfont systemIcon">
                                    </el-icon>有关系统
                                </template>
                            </el-menu-item>

                        </el-menu>
                        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group> -->
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-main class="el_main">
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped>

.el_aside {  
  margin-right: 0 !important; /* 假设右侧是el-main */  
  padding: 0 !important; /* 如果需要的话 */  
}  
 
.el_main {  
  margin-left: 0 !important; /* 假设左侧是el-aside */  
  padding: 0 !important; /* 如果需要的话 */  
}
.common {
    width: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    filter: brightness(var(--page-brightness));  
    transition: filter 0.3s ease;

}

.mainHeader {
    width: 100%;
    background-color: rgb(94, 171, 248);
    position: relative;
    height: 60px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 2%;
}

.menu {
    top: 1%;
    position: absolute;
    right: 3%;
}</style>